import React from "react";
import SvgIcon from "@/components/SvgIcon/SvgIcon";
import { useEnhanceSelector } from "@/hooks";
import { UserInfo } from "@/type/UserInfoType";
import { useNavigate } from "react-router-dom";
import { Badge } from "antd-mobile";
import "./Member.scss";

const Member = () => {
   const navigate = useNavigate();
   const token: string = useEnhanceSelector(state => state.loginStore.loginData).token;
   const userInfo: UserInfo = useEnhanceSelector(state => state.userInfoStore.userInfo);
   const orderList = useEnhanceSelector(state => state.orderStore.orderList);
   const orderStatus = useEnhanceSelector(state => state.orderStore.orderStatus);
   const goToOrder = (orderType: string) => {
      navigate(`/order/?orderType=${orderType}`);
   };

   return (
      <div className="member">
         <div className="asset">
            <div className="asset-item">
               <span className="count">{token ? `${userInfo.balance || 0}` : "- -"}</span>
               <span>账户余额</span>
            </div>
            <div className="asset-item">
               <span className="count">{token ? `${userInfo.points || 0}` : "- -"}</span>
               <span>积分</span>
            </div>
            <div className="asset-item">
               <span className="count">{token ? `${userInfo.points || 0}` : "- -"}</span>
               <span>优惠卷</span>
            </div>
            <div className="asset-item">
               <SvgIcon name="purse" width="20px" height="20px"></SvgIcon>
               <span>我的钱包</span>
            </div>
         </div>

         <div className="order">
            <div className="order-item" onClick={() => goToOrder("all")}>
               <SvgIcon name="order" width="20px" height="20px"></SvgIcon>
               <span>全部订单</span>
               <Badge content={orderList.length || ""}></Badge>
            </div>
            <div className="order-item" onClick={() => goToOrder("payment")}>
               <SvgIcon name="pay" width="20px" height="20px"></SvgIcon>
               <span>待支付</span>
               <Badge content={orderStatus.payment || ""}></Badge>
            </div>
            <div className="order-item" onClick={() => goToOrder("delivery")}>
               <SvgIcon name="send" width="20px" height="20px"></SvgIcon>
               <span>待发货</span>
               <Badge content={orderStatus.delivery || ""}></Badge>
            </div>
            <div className="order-item" onClick={() => goToOrder("received")}>
               <SvgIcon name="take" width="20px" height="20px"></SvgIcon>
               <span>待收货</span>
               <Badge content={orderStatus.received || ""}></Badge>
            </div>
         </div>
      </div>
   );
};

export default Member;
